<template>
  <div class="checkbox-editor">
    <h3>多选题</h3>
    <el-form :model="localModel" label-position="left" label-width="50px" ref="checkboxForm">
      <el-form-item label="标题" prop="title" required>
        <el-input v-model="localModel.title"></el-input>
      </el-form-item>
      <el-form-item label="描述" prop="description">
        <el-input v-model="localModel.description"></el-input>
      </el-form-item>
      <el-form-item label="得分" prop="score" v-if="judgeThis()">
        <el-input-number :min="0" v-model="localModel.score"></el-input-number>
      </el-form-item>
      <el-form-item label="选项" prop="options" required>
        <div v-for="(item,index) in localModel.options" :key="index" class="option">
          <el-input v-model="localModel.options[index].label" placeholder="请填入选项名"></el-input>
          <!-- 自动判断 -->
          <el-switch v-model="item.isAnswer" active-text="正确答案" inactive-text="非正确答案" v-if="judgeThis()">
          </el-switch>
          <!-- 限制数量 -->
          <div v-if="options.limitNumber">
            <el-switch v-model="item.limited" active-text="限额" inactive-text="不限额">
            </el-switch>
            <el-input-number v-model="item.amount" v-if="limitThis(item)"></el-input-number>
          </div>
          <el-button type="info" icon="el-icon-delete" @click="removeOption(index)"></el-button>
        </div>
        <div class="add_option" @click="addOption">新建选项</div>
      </el-form-item>
      <el-form-item label="配置项">
        <div style="display:flex;justify-content:space-around">
          <el-switch v-model="localModel.must" active-text="必做" inactive-text="选做"></el-switch>
          <!-- 是否向用户展示结果 -->
          <el-switch v-model="localModel.showResult" v-if="options.showResult" active-text="展示本题结果"
            inactive-text="不展示本题结果"></el-switch>
          <!-- 是否判断此题 -->
          <el-switch :active-value="1" :inactive-value="2" v-model="localModel.key" v-if="options.autoJudge"
            active-text="自动判题" inactive-text="不判本题"></el-switch>
        </div>
      </el-form-item>
    </el-form>
    <div class="q-item q-item-control">
      <el-button type="primary" @click="handleSave">确定</el-button>
      <el-button @click="handleCancel">取消</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "QeditorCheckbox",
  props: {
    options: {
      type: Object,
      default: function() {
        return {
          autoJudge: false,
          showResult: false,
          limitNumber: false
        };
      }
    },
    setting: {
      type: Object,
      default: function() {
        return {
          type: "multi",
          must: true,
          title: "多选题",
          description: "i am a ques",
          options: [
            { label: "xxx", isAnswer: false, amount: 10, limited: false },
            { label: "xxx", isAnswer: false, amount: 10, limited: false }
          ]
        };
      }
    }
  },
  data() {
    return {
      localModel: {}
    };
  },
  methods: {
    beforeSubmit() {
      // 在提交答案前处理chosen数组，根据题目所属问卷类型以及题目自身选项
      this.localModel.chosen = [];
      if (this.options.autoJudge) {
        for (let op of this.localModel.options) {
          if (op.isAnswer == true) {
            // 考试问卷 chosen中存对应答案
            this.localModel.chosen.push(op.label);
          }
        }
      } else if (this.options.limitNumber) {
        for (let op of this.localModel.options) {
          if (op.limited == true) {
            //报名问卷 chosen中存最大限额
            this.localModel.chosen.push(op.amount);
          } else {
            this.localModel.chosen.push(-1);
          }
        }
      }
      if (this.localModel.chosen.length == 0)
        this.localModel.chosen.push("@##$%^*&^%*^&%$%#$%^");
    },
    limitThis(item) {
      return this.options.limitNumber && item.limited;
    },
    judgeThis() {
      return this.options.autoJudge && this.localModel.key == 1;
    },
    loadOrigin() {
      // 保存一份副本，以便取消更改时复原
      this.localModel = JSON.parse(JSON.stringify(this.setting));
    },
    handleSave() {
      // 否则检测是否满足验证函数
      // 满足则将新的表单提交给上级
      this.$refs.checkboxForm.validate(valid => {
        if (valid) {
          this.beforeSubmit();
          this.$emit("change", this.localModel);
        } else {
          this.$message({ type: "warning", message: "请检查信息是否完整" });
        }
      });
    },
    handleCancel() {
      // 取消则还原修改
      this.loadOrigin();
      this.$emit("cancel", this.localModel);
    },
    removeOption(index) {
      if (this.localModel.options.length > 1)
        this.localModel.options.splice(index, 1);
      else {
        this.$message("至少保留一个选项");
      }
    },
    addOption() {
      this.localModel.options.push({
        label: "新选项",
        isAnswer: false,
        amount: 10,
        limited: false
      });
    }
  },
  mounted() {
    console.log("checkbox" + this.localModel);
    this.loadOrigin();
  },
  watch: {
    setting(newVal, oldVal) {
      this.loadOrigin();
    }
  }
};
</script>

<style scoped>
.checkbox-editor .add_option {
  display: inline-block;
  zoom: 1;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  border: 1px dashed #e0e0e0;
  padding: 6px 10px;
  background: #fafafa;
  color: #b2b2b2;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.8em;
}
.checkbox-editor .option {
  display: flex;
  margin: 10px;
}
.checkbox-editor .option .el-input {
  width: 75%;
  margin: 0 50px 0 0;
}
</style>